<template>
	<view class="page">
		<view class="search-bar" v-if="show">
			<view class="search-bar-form">
				<view class="search-bar-box">
					<!-- #ifdef APP-PLUS || MP-->
					<icon class="icon-search-in-box" type="search" :size="16"></icon>
					<!-- #endif -->
					<input class="search-bar-input" placeholder="请输入搜索关键词" placeholder-class="phcolor" v-model="user" />
				</view>
			</view>
			
			<button class="btn-primary" hover-class="btn-hover" @tap="searchUser">搜索</button>
		</view>
		<view class="tag-con" v-if="show">
			<yonghu-tags ref="yonghuTagRef" ></yonghu-tags>
		</view>
		<view class="tui-list search-result">
			<view class="tui-list-cell" :class="{active: index == n}" hover-class="tui-list-cell-hover" v-for="(item,index) in searchResult" :key="index" @tap="selectFriends(index, item.userId)">
				<view class="tui-list-cell-navigate">
					<image :src="item.img" class="img" @tap="goUserInfo(item.userId)"></image>
					<view class="content" @tap="goUserInfo(item.userId)">
						<view class="title">{{item.user}}</view>
						<view class="sub-title">{{item.strattime}}</view>
					</view>
					<view @tap="addFriends(index, item.userId)" v-if="show">
						添加
					</view>
				</view>
			</view>
		</view>
		
		<!-- <view class="btn-box">
			<button class="tui-btn tui-btn-block" hover-class="tui-warning-hover" @click="addFriend">好友添加</button>
		</view> -->
		
	</view>
</template>

<script>
	import yonghuTags from '@/components/xinliziliao/yonghuTags'
	export default {
		components: {
			yonghuTags
		},
		data() {
			return {
				searchResult: [], // 搜索结果,
				// data: {
				// 	user: '',
				// 	userId: ''
				// }
				user: '',
				userId: '',
				n: null,
				show : true,
				type : 1
			}
		},
		onLoad: function(options) {
			// #ifndef H5
			uni.showShareMenu({
				showShareItems : ['qq', 'qzone', 'wechatFriends', 'wechatMoment']	
			});
			// #endif
			
			// 取消用户初始化。	
			// this.initLists();	
			if( options.show ){
				this.show = false;
				this.type = 2;
				let array = this.$xinli.user.getUserInfo().yonghuBiaoQian;
				console.log(options.show,array);	
				array = this.$tools.arrayTool.drawArray(array,'value');
				this.searchUser0(array);
				console.log(options.show,array);
			}
		},
		methods: {
			goUserInfo(toUserId){
				// 不管谁都和他聊天。
				this.$tools.page.userInfo(toUserId,true);
			},
			async initLists() {
				this.searchResult = await this.$apiW.getEveryone();
				this.searchResult = this.searchResult.data;
				console.log('this.searchResult', this.searchResult);
			},
			clearInput() {
				this.inputVal = "";
				this.inputShowed = false;
				this.searchResult = [];
				uni.hideKeyboard() //强行隐藏键盘
			},
			inputTyping(e) {
				this.inputVal = e.detail.value
			},
			searchUser(){
				if( this.$refs.yonghuTagRef){
					this.searchUser0(this.$refs.yonghuTagRef.getClickTags());
				}
			},
			searchUser0(array){
				let data = {
					user: this.user,
					yonghbiaoqian : array,
					type : this.type
				}
				this.searchUser00(data);
			},
			async searchUser00(data){
				console.log(data)
				this.searchResult = await this.$apiW.getEveryone(data);
				this.searchResult = this.searchResult.data;
				// uni.showToast({
				//     title : '系统正在查找相关好友',
				//     duration : 1500
				// });
				setTimeout(function (){
					uni.pageScrollTo({
					    scrollTop: 99999999999
					})
				}, 1000);
			},
			selectFriends(idx, id){
				this.n = idx;
				this.userId = id;
				console.log(this.searchResult, idx, id);
			},
			addFriends(idx, id){
				this.n = idx;
				this.userId = id;
				this.addFriend();
			},
			
			async addFriend(){
				let userInfo = uni.getStorageSync('userInfo');
				let data = {
					userId: userInfo.userId,
					friendId: this.userId
				}
				let res = await this.$api.addFriend(data);
				uni.setStorageSync('userInfo',res.data);
				uni.reLaunch({
				    url: 'record'
				});
			}
		}
	}
</script>

<style scoped>
	@import '../../static/style/thorui.css';

	.scrollList {
		flex: 1;
	}

	.search-bar {
		display: flex;
		align-items: center;
		position: relative;
		padding: 30upx 30upx 30upx;
		background-color: #fff;
		/* box-shadow: 0 2px 2px #ccc;*/
	}

	.search-bar-form {
		flex: 1;
		position: relative;
		border-radius: 32upx;
		background: #f2f5f7;
	}

	.search-bar-box {
		display: flex;
		align-items: center;
		position: relative;
		padding-left: 20upx;
		padding-right: 20upx;
		height: 64upx;
		z-index: 1;
	}

	.search-bar-input {
		line-height: normal;
		width: 100%;
		padding-left: 20upx;
		font-size: 30upx;
		color: #333;
	}

	.phcolor {
		font-size: 30upx;
	}

	.icon-clear {
		height: 38upx;
	}

	.icon-search {
		position: relative;
		height: 26upx;
		margin-right: 20upx;
		font-size: inherit;
	}

	.cancel-btn {
		padding-left: 30upx;
	}

	.btn-primary {
		height: 62upx;
		width: 122upx;
		font-size: 30upx;
		line-height: 62upx;
		margin-left: 30upx;
	}

	.search-result::before {
		display: none;
	}

	.search-result::after {
		display: none;
	}

	.tui-list-cell {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.tui-list-cell-hover {
		background-color: #eee !important;
	}

	.tui-list-cell-navigate {
		width: 100%;
		position: relative;
		padding: 25upx 0 25upx 30upx;
		font-size: 28upx;
		color: #333;
		display: flex;
		align-items: center;
	}

	.tui-list-cell-navigate::after {
		content: '';
		position: absolute;
		border-bottom: 1upx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 30upx;
	}

	.img {
		width: 120upx;
		height: 120upx;
		border-radius: 50%;
	}

	.content {
		width: 80%;
		padding-left: 30upx;
	}

	.title {
		width: 80%;
		font-size: 34upx;
		padding-bottom: 10upx;
		color: #333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis
	}

	.sub-title {
		width: 80%;
		color: #7A7A7A;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 28upx;
	}

	.tui-list {
		background-color: #fff;
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-list-cell-divider {
		height: 66upx;
		padding-left: 30upx;
		font-size: 26upx;
		color: #999;
		background: #f2f5f7;
		padding: 0 30upx;
		display: flex;
		align-items: center;
	}

	.tui-indexed-list-bar {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		z-index: 9999;
		position: absolute;
		top: 132upx;
		right: 0;
		padding-right: 10upx;
		width: 44upx;
	}

	.tui-indexed-list-text {
		font-size: 22upx;
	}

	.tui-indexed-list-bar.active {
		background-color: rgb(200, 200, 200);
	}

	.tui-indexed-list-alert {
		position: absolute;
		z-index: 20;
		width: 120upx;
		height: 120upx;
		right: 90upx;
		top: 50%;
		margin-top: -60upx;
		border-radius: 16upx;
		text-align: center;
		line-height: 120upx;
		font-size: 50upx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.btn-box{
		padding: 60upx;
	}
	.active{
		background: #fcd6d2;
	}
	.btn-primary{
		background: #df5451 !important;
		color: #ffff01;
	}
	.tui-btn{
		background-color: #df5451;
		color: #fff;
	}
	.tag-con{
		padding: 0 40upx;
	}
</style>
